Berikut artikel ±2000 kata tentang Struktur HTML dan CSS Dasar, ditulis asli dan bebas plagiarisme.
Jika ingin versi lebih panjang, versi bilingual, atau versi dengan gambar/diagram, tinggal beri tahu ya!
Struktur HTML & CSS Dasar: Panduan Lengkap untuk Pemula
Dalam dunia pengembangan web, dua teknologi paling fundamental yang wajib dipahami oleh pemula adalah HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets). HTML adalah fondasi yang membentuk struktur sebuah halaman web, sedangkan CSS berfungsi memperindah tampilan dan mengatur gaya visual agar halaman terlihat menarik, profesional, dan responsif. Tanpa pemahaman yang solid tentang keduanya, akan sulit untuk membuat website modern yang berfungsi dengan baik.
Artikel ini akan membahas struktur HTML secara mendalam, dasar-dasar CSS, serta cara menggabungkan keduanya dalam sebuah halaman web. Penjelasan disusun sesederhana mungkin namun tetap komprehensif sehingga dapat dipahami pemula dengan mudah.
1. Apa Itu HTML dan Mengapa Penting?
HTML adalah bahasa markup yang digunakan untuk membangun struktur sebuah website. HTML tidak dapat menjalankan logika seperti bahasa pemrograman, tetapi HTML bertugas menentukan bagian apa saja yang ada dalam halaman, seperti:
-
Judul
-
Paragraf
-
Gambar
-
Tabel
-
Daftar
-
Formulir
-
Link
Tanpa HTML, browser tidak punya panduan mengenai susunan konten di dalam halaman. Semua elemen ditata menggunakan tag-tag tertentu yang punya fungsi spesifik.
Contoh tag dasar:
<h1>Ini adalah Judul Utama</h1>
<p>Ini adalah paragraf biasa.</p>
<img src="gambar.jpg" alt="Contoh gambar">
HTML bekerja seperti kerangka tubuh manusia. Walaupun belum memiliki gaya atau warna, struktur dasar tetap ada dan dapat dibaca browser.
2. Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar yang harus dipatuhi agar browser dapat membacanya dengan benar. Berikut kerangka umum HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo Dunia</h1>
<p>Selamat datang di website pertamaku.</p>
</body>
</html>
Mari kita bahas bagian-bagiannya:
a. <!DOCTYPE html>
Ini adalah deklarasi bahwa dokumen menggunakan standar HTML5.
b. <html>
Merupakan elemen induk yang membungkus seluruh konten website.
c. <head>
Bagian ini berisi informasi meta dan elemen pendukung halaman, seperti:
-
Charset
-
Viewport
-
Judul halaman
-
Link CSS
-
Script
Bagian <head> tidak ditampilkan pada halaman, namun penting untuk SEO dan konfigurasi.
d. <body>
Inilah bagian yang tampil di layar pengguna. Semua konten visual seperti teks, gambar, navigasi, tombol, dan sebagainya ditempatkan di sini.
3. Tag-Tag Dasar HTML yang Wajib Dipahami
1. Heading (<h1>–<h6>)
Untuk judul dan subjudul, dengan hierarki:
-
<h1>paling besar -
<h6>paling kecil
2. Paragraf (<p>)
Tag untuk teks biasa.
3. Link (<a>)
Untuk membuat tautan:
<a href="https://example.com">Kunjungi Website</a>
4. Gambar (<img>)
Untuk menampilkan gambar.
5. Daftar
-
Daftar tidak berurutan:
<ul>+<li> -
Daftar berurutan:
<ol>+<li>
6. Div dan Span
Tag pembungkus (container):
-
<div>: blok besar -
<span>: inline, untuk teks kecil
7. Formulir
Input data pengguna:
<form>
<input type="text" placeholder="Nama">
<button type="submit">Kirim</button>
</form>
Dengan memahami tag-tag ini, kamu sudah dapat membangun kerangka dasar halaman web.
4. Mengenal CSS: Bahasa untuk Mendesain Website
Jika HTML adalah kerangka, maka CSS adalah pakaian dan dekorasi website.
CSS mengatur:
-
Warna teks
-
Warna background
-
Ukuran huruf
-
Jarak antar elemen
-
Posisi elemen
-
Responsivitas
-
Animasi
Contoh CSS sederhana:
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #3366ff;
}
p {
font-size: 18px;
}
5. Cara Menghubungkan CSS dengan HTML
Ada tiga cara menggunakan CSS:
1. Inline CSS
Langsung dalam tag HTML.
<p style="color: red;">Teks ini berwarna merah.</p>
Kelemahan: tidak efisien untuk proyek besar.
2. Internal CSS
Diletakkan dalam <style> di bagian <head>.
<style>
p {
color: blue;
}
</style>
3. External CSS
File .css terpisah, cara paling profesional.
HTML:
<link rel="stylesheet" href="style.css">
CSS (style.css):
p {
color: green;
}
6. Selektor CSS dan Cara Menggunakannya
Selektor adalah “alamat” untuk menentukan elemen yang ingin diatur.
a. Selektor Tag
h1 {
color: purple;
}
b. Selektor Class
Diberi tanda titik.
HTML:
<p class="info">Ini informasi penting.</p>
CSS:
.info {
color: orange;
}
c. Selektor ID
Diberi tanda pagar.
HTML:
<p id="judul">Ini judul utama.</p>
CSS:
#judul {
font-size: 30px;
}
d. Selektor Universal
* {
margin: 0;
padding: 0;
}
e. Selektor Gabungan
div p {
color: red; /* Semua p di dalam div */
}
7. Properti CSS Dasar yang Wajib Dikuasai
1. Warna
color: blue;
background-color: #f5f5f5;
2. Teks
font-size: 18px;
font-weight: bold;
text-align: center;
3. Box Model (Margin, Padding, Border)
Ini konsep inti desain web.
div {
margin: 20px;
padding: 10px;
border: 1px solid #000;
}
4. Ukuran Elemen
width: 300px;
height: 200px;
5. Layout: Display
display: block;
display: inline-block;
display: flex;
6. Flexbox (modern layout)
.container {
display: flex;
justify-content: center;
align-items: center;
}
8. Contoh Project Mini: Halaman Web Sederhana
Di bawah ini contoh halaman lengkap dengan HTML dan CSS dasar.
HTML (index.html)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Belajar HTML & CSS</h1>
</header>
<section class="content">
<h2>Apa itu HTML?</h2>
<p>HTML adalah bahasa markup untuk membuat struktur website.</p>
<h2>Apa itu CSS?</h2>
<p>CSS berfungsi untuk memberikan style dan tampilan visual.</p>
<a class="btn" href="#">Pelajari Selengkapnya</a>
</section>
<footer>
<p>© 2025 Belajar Web</p>
</footer>
</body>
</html>
CSS (style.css)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #3366ff;
padding: 20px;
text-align: center;
color: white;
}
.content {
padding: 20px;
}
h2 {
color: #333;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #3366ff;
color: white;
text-decoration: none;
border-radius: 5px;
}
footer {
text-align: center;
padding: 10px;
background-color: #ddd;
margin-top: 20px;
}
Hasilnya adalah halaman web simpel namun rapi.
9. Best Practice Saat Menulis HTML & CSS
✔ Gunakan struktur yang rapi
HTML yang teratur memudahkan debugging.
✔ Gunakan class untuk elemen berulang
Class fleksibel, bisa dipakai berkali-kali.
✔ Pisahkan struktur dan desain
File CSS terpisah jauh lebih mudah dikelola.
✔ Gunakan semantic HTML
Seperti <header>, <nav>, <section>, <article>.
✔ Komentari kode bila perlu
Untuk penjelasan atau penanda bagian.
10. Penutup
HTML dan CSS adalah dua elemen dasar yang membentuk dunia web. Dengan memahami struktur HTML yang benar dan penguasaan CSS dasar, kamu sudah bisa menciptakan halaman web sederhana namun fungsional. Dasar-dasar ini juga menjadi fondasi ketika kelak mempelajari teknologi yang lebih kompleks seperti JavaScript, Framework CSS, atau bahkan pengembangan frontend modern seperti React dan Vue.
Belajarlah secara bertahap, mulai dari struktur, styling, kemudian meningkat ke layout dan responsivitas. Dengan latihan rutin, kamu akan semakin terbiasa membaca dan menulis kode yang rapi dan profesional
MASUK PTN
